<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="">
        name<input type="text" name="name" id="">
        age<input type="text" name="age" id="">
        <input type="button" value="保存" onclick="save()">
        <input type="button" value="取消" onclick="quit()">
    </form>


    <script src="./js/axios.min.js"></script>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        const url = "http://localhost:8080"
        $(function(){
            const id = new URLSearchParams(location.search).get("id")
           if(id){
                axios.get(`${url}/${id}`).then((res)=>{
                    $("[name=name]").val(res.data.name)
                    $("[name=age]").val(res.data.age)
                })
           }
            


        })



        async function save(){
            const id = new URLSearchParams(location.search).get("id")
            let name = $("[name=name]").val()
            let age = $("[name=age]").val()
            let res;
            if(id){           
                res = await axios.post(`${url}/${id}`,{name,age})
            }else{
                res = await axios.put(url,{name,age})
            }
            if(res.status==200){
                console.log("保存成功");
                 location.href="./index.html"
            }else{
                console.log("保存失败");
            }
        }


        function quit(){
            location.href="./index.html"
        }




    </script>
    
</body>
</html>